<template>
  <div id="hot">
      <div class="top">
          <!-- <img src="https://s3.music.126.net/mobile-new/img/hot_music_bg_3x.jpg?2bfefd3ba37eaffbd66b7d108b9de26a="  alt=""> -->
          <div>
              <img src="../../assets/热歌榜.png"  alt="">
              
              <!-- <div>更新日期：07月20日</div> -->
          </div>
      </div>
        <sing :hotArr="hotArr"></sing>
        
  </div>

</template>

<script>

import sing from "../../components/zujian.vue";
export default {
    data:function (){
        return{
            hotArr:[
                
            ]
        }
    },
    // methods:{
    //     hotArr(){
    //         this.hotArr.unshift({
    //             id:Date.now(),
                
    //         })
    //     }
    // },
    async mounted(){
        let res = await this._axios.get("/playlist/detail?id=3778678")
            console.log(res.data.playlist.tracks);
            this.hotArr = res.data.playlist.tracks.slice(0,20)
            console.log(this.hotArr);
        },
components:{
     sing,
 }
}
</script>

<style lang="scss" scoped>
    #hot{
        .top{
            >div{
                
                width: _vw(750);
                background-image: url("https://s3.music.126.net/mobile-new/img/hot_music_bg_3x.jpg?2bfefd3ba37eaffbd66b7d108b9de26a=");
                background-repeat: no-repeat;
                background-size: cover;
                img{
                    
                width: _vw(750);
                div{
                    
                    color: white;

                }
                
                // height: 161px;
            }
            }
        }
    }
</style>